<template>
  <el-card>
    <BreadCrumb />
    <el-table
      :data="roleList"
      :cell-style="{ textAlign: 'center' }"
      :header-cell-style="{ textAlign: 'center' }"
      style="width: 100%"
      stripe
      border
      highlight-current-row
    >
      <el-table-column
        label="#"
        type="index"
        width="100px"
      />
      <el-table-column label="角色名称" width="300px">
        <template slot-scope="scope">
          <span>{{ scope.row.roleName }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="300px">
        <template slot-scope="scope">
          <el-button size="mini" type="danger" icon="el-icon-delete" :disabled="scope.row.roleName === '超级管理员' || scope.row.roleName === '普通用户' ? true : false" @click="deleteRole(scope.row.id)">
            删除
          </el-button>
          <el-button size="mini" type="warning" icon="el-icon-setting" :disabled="scope.row.roleName === '超级管理员' || scope.row.roleName === '普通用户' ? true : false" @click="showDialog(scope.row)">
            分配权限
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog
      :visible.sync="dialogVisible"
      title="权限分配"
      @close="handleDialogClose"
    >
      <el-tree
        ref="tree"
        node-key="id"
        :data="rightList"
        :props="defaultProps"
        :default-checked-keys="defaultSelectRightList"
        show-checkbox
      />
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleDialogClose">取 消</el-button>
        <el-button type="primary" @click="assignRight()">确 定</el-button>
      </span>
    </el-dialog>
  </el-card>
</template>

<script>
import BreadCrumb from '@/components/BreadCrumb'
import { isConfirm } from '@/utils/confirm'
import { checkAuth } from '@/utils/checkAuth'
import { getRoleList, assignRights, deleteRole } from '@/api/roleApi'
import { getRightList } from '@/api/rightApi'
export default {
  components: {
    BreadCrumb
  },
  data() {
    return {
      // 角色列表数据
      roleList: [],
      // 控制分配权限对话框的显示与隐藏
      dialogVisible: false,
      // 树形控件权限数据
      rightList: [],
      // 树形控件配置
      defaultProps: {
        children: 'children',
        label: 'rightName'
      },
      // 树形控件默认选择的权限 id
      defaultSelectRightList: [],
      // 当前选中的角色 id
      roleId: '',
      // 要给角色赋予的权限 id 字符串
      rightIds: ''
    }
  },
  created() {
    // 获取角色列表数据
    this.getRoleList()
    // 获取权限列表数据
    this.getRightList()
  },
  methods: {
    // 获取权限列表数据
    async getRightList() {
      const { data: res } = await getRightList()
      this.rightList = res.NestedList
    },
    // 获取角色列表数据
    async getRoleList() {
      const { data: res } = await getRoleList()
      this.roleList = res.roleList
    },
    // 删除角色
    async deleteRole(id) {
      if (!await checkAuth('删除角色')) return
      // 删除确认
      if (await isConfirm('此操作将会永久删除该角色，是否继续？')) {
        await deleteRole(id)
        this.$message.success('删除成功')
        // 重新获取数据
        this.getRoleList()
      }
    },
    // 点击分配权限，显示对话框
    async showDialog(role) {
      if (!await checkAuth('分配权限')) return
      this.roleId = role.id
      this.getDefaultSelectRightList(role)
      // 显示对话框
      this.dialogVisible = true
    },
    // 点击确定，分配权限
    async assignRight() {
      // 处理树形控件选中数据
      this.getRightIds()
      // 确定询问
      if (await isConfirm('确定给该角色赋予权限？')) {
        await assignRights(this.roleId, this.rightIds)
        this.$message.success('分配成功')
        // 关闭对话框
        this.dialogVisible = false
        this.handleDialogClose()
      }
    },
    // 分配权限对话框关闭事件
    handleDialogClose() {
      // 清空树形控件选中的数据
      this.$refs.tree.setCheckedNodes([])
    },
    // 根据角色生成树形控件默认选中的 id 数组
    getDefaultSelectRightList(role) {
      this.defaultSelectRightList = []
      role.rightList.forEach(item => {
        this.defaultSelectRightList.push(item.id)
      })
    },
    // 处理树形控件选中的数据，使之变成由权限 id 构成的字符串
    getRightIds() {
      const selectNodes = this.$refs.tree.getCheckedNodes()
      // 数据处理，将全选的剔除掉子权限
      selectNodes.forEach(item1 => {
        if (item1.children.length > 0) {
          // 说明该选项已经全选
          // 这时候在遍历他的 children，剔除 selectNodes 中与 children id 相同的元素
          item1.children.forEach(item2 => {
            // 考虑三级情况
            item2.children.forEach(item3 => {
              selectNodes.splice(selectNodes.indexOf(item3), 1)
            })
            selectNodes.splice(selectNodes.indexOf(item2), 1)
          })
        }
      })
      const rightIdList = []
      // 数据处理，只获取 selectNodes 中的 id
      selectNodes.forEach(item => {
        rightIdList.push(item.id)
      })
      this.rightIds = rightIdList.join(',')
    }
  }
}
</script>

<style scoped>
.el-table{
  font-size: 16px;
  margin-left: 10px;
}
.el-table__row span {
  margin-left: 10px
}
.el-card{
  min-height:95%;
}
.el-tree /deep/ .el-tree-node__content{
  height: 40px;
}
.el-tree /deep/ .el-tree-node__label{
  font-size: 16px;
}
</style>
